<template>
  <view w-full box-border pa-20rpx>
    <view bg="#fff" rounded-20rpx w-full box-border px-20rpx py-40rpx mb-10rpx flex>
      <image mode="aspectFill" w-240rpx h-240rpx rounded-20rpx mr-30rpx shrink-0 :src="goodsInfo.goodsImg"></image>
      <view w-full h-240rpx flex flex-col justify-between>
        <view w-full>
          <view break-all text-32rpx font-bold line-clamp-1>{{ goodsInfo.goodsName }}</view>

          <view mt-22rpx flex overflow-x-auto style="white-space: nowrap">
            <view
              h-40rpx
              px-20rpx
              box-border
              rounded-20rpx
              bg="#FCC300"
              text="#000"
              text-20rpx
              flex
              justify-center
              items-center
              mr-20rpx
              shrink-0>
              {{ goodsInfo.goodsType == 1 ? '电子票' : '智能卡' }}
            </view>
            <view
              v-if="goodsInfo.labelName1"
              h-40rpx
              px-10rpx
              box-border
              rounded-20rpx
              bg="#EEEEEE"
              text="#484848"
              text-20rpx
              flex
              justify-center
              items-center
              mr-20rpx
              shrink-0>
              {{ goodsInfo.labelName1 }}
            </view>
            <view
              v-if="goodsInfo.labelName2"
              h-40rpx
              px-10rpx
              box-border
              rounded-20rpx
              bg="#EEEEEE"
              text="#484848"
              text-20rpx
              flex
              justify-center
              items-center
              mr-20rpx
              shrink-0>
              {{ goodsInfo.labelName2 }}
            </view>
            <view
              v-if="goodsInfo.labelName3"
              h-40rpx
              px-10rpx
              box-border
              rounded-20rpx
              bg="#EEEEEE"
              text="#484848"
              text-20rpx
              flex
              justify-center
              items-center
              mr-20rpx
              shrink-0>
              {{ goodsInfo.labelName3 }}
            </view>
          </view>
        </view>
        <view w-full flex items-end justify-between>
          <view flex items-end mt-20rpx text="#D03939" font-bold>
            <view mb-6rpx text-20rpx>¥</view>
            <view text-36rpx>{{ goodsInfo.goodsPrice }}</view>
          </view>
          <view>
            <nut-input-number v-model="payNum" min="1" :max="goodsInfo.goodsStock"></nut-input-number>
          </view>
        </view>
      </view>
    </view>
    <view w-full bg="#fff" rounded-20rpx box-border px-20rpx py-30rpx mb-10rpx flex>
      <view text-28rpx shrink-0 mr-20rpx>备注</view>
      <view w-full rounded-10rpx box-border px-20rpx py-10rpx style="border: 1px solid #d9d9d9">
        <!-- <textarea v-model="params.userRemark" placeholder="请输入备注" rows="3" w-550rpx h-150rpx /> -->
        <nut-textarea
          v-model="userRemark"
          limit-show
          max-length="100"
          textarea-class="w-550rpx h-150rpx"
          :customStyle="{ padding: '0' }" />
      </view>
    </view>
    <view w-full bg="#fff" rounded-20rpx box-border px-20rpx mb-10rpx>
      <view w-full h-88rpx flex items-center justify-between text="#000" style="border-bottom: 1px solid #eeeeee">
        <view text-28rpx font-500>商品总计</view>
        <view flex items-end font-bold>
          <view mb-6rpx text-20rpx>¥</view>
          <view text-28rpx font-bold>{{ totalPrice }}</view>
        </view>
      </view>
      <view w-full h-110rpx flex items-center justify-between text="#000">
        <view text-28rpx font-500>应付金额</view>
        <view flex items-end text="#D03939" font-bold>
          <view mb-6rpx text-20rpx>¥</view>
          <view text-36rpx font-bold>{{ totalPrice }}</view>
        </view>
      </view>
    </view>
  </view>
  <view
    class="safe-bottom"
    position-fixed
    rounded-t-20rpx
    bottom-0
    w-full
    bg="#fff"
    z-999
    style="box-shadow: 4rpx 0rpx 20rpx 0rpx rgba(190, 190, 190, 0.25)">
    <view w-full box-border px-40rpx py-32rpx flex justify-between items-center>
      <view flex items-end mt-20rpx text="#D03939" font-bold>
        <view mb-6rpx text-28rpx>¥</view>
        <view text-48rpx>{{ totalPrice }}</view>
      </view>
      <view
        w-340rpx
        h-80rpx
        rounded-40rpx
        bg="#FCC300"
        flex
        justify-center
        items-center
        font-500
        text="#000"
        text-32rpx
        @click="createOrder">
        提交订单
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getTicketGoodsDetail, createTicketGoodsOrder } from '@/api/ticketGoods'
import { onLoad } from '@dcloudio/uni-app'
const result = ref<any>({
  status: 1
})
const goodsInfo = ref<any>({})
const payNum = ref(1)
const userRemark = ref('')
const totalPrice = computed(() => {
  return (goodsInfo.value.goodsPrice * payNum.value).toFixed(2)
})
function createOrder() {
  uni.showLoading({ title: '正在提交...', mask: true })
  const params = {
    goodsId: goodsInfo.value.goodsId,
    payNum: payNum.value,
    userRemark: userRemark.value
  }
  createTicketGoodsOrder(params)
    .then((res: any) => {
      console.log('创建订单', res)
      uni.hideLoading()
      uni.redirectTo({
        url: `/pages/ticket/pay?id=${res.data.result.orderId}`
      })
    })
}
onMounted(() => {})
onLoad((options: any) => {
  getTicketGoodsDetail(options.id).then((res: any) => {
    goodsInfo.value = res.data.result
  })
})
</script>
<style>
.nut-textarea {
  padding: 0;
}
</style>
<style scoped lang="scss"></style>
